<template>
  <section class="article-wrap flex justify-between">
    <section class="article-inner">
      <section class="article-main">
        <h3 class="article-title font-bold">{{ detailData.article.title }}</h3>
        <p class="article-side-info flex">
        <ul class="flex">
          <li class="article-mark font-m text-center" v-for="(item, index) in detailData.article.tag" :key="index">
            {{ item }}</li>
        </ul>
        <span class="article-release-time font-md">{{ detailData.article.create_at }}</span>
        </p>
        <article class="article font-m" v-html="detailData.article.about"></article>
      </section>
      <!-- 文章内容页底部部分 -->
      <section class="main-bottom">
        <section class="main-recommend" v-for="item in detailData.recommend" :key="item.id">
          <router-link :to="'/news/article?id=' + item.id">
            <h3 class="main-recommend-title text-ellipsis font-m font-bold">{{ item.title }}</h3>
            <ul class="recommend-list flex">
              <li class="recommend-item" v-for="(imgSrc, index) in item.images" :key="index">
                <img :src="imgSrc" alt="图片">
              </li>
            </ul>
          </router-link>
        </section>
      </section>
    </section>
    <!-- 右侧边栏 -->
    <section class="news-aside">
      <Case :list="sideData.case">相关案例</Case>
      <Information :list="sideData.info">项目中心</Information>
      <Hotinfo :list="sideData.hot">资讯热榜</Hotinfo>
      <Movie>影视拍摄</Movie>
    </section>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { getNewsDetail, getNewsPropsal, getHotList, getCaseList } from "@/api";

// 引入组件
import Case from './components/case.vue'
import Information from './components/information.vue'
import Hotinfo from './components/hotinfo.vue'
import Movie from './components/movie.vue'

const route = useRoute();

const detailData = reactive({
  article: {} as any,
  recommend: [] as any
})
// 右侧边栏数据
const sideData = reactive({
  case: [
    {
      src: "https://img.cctvch.cn/uploads/9bc73a62897892b6fa607e188e9131b6.png",
      title: "案例名称",
      index: 0,
      alt: "case",
    },
    {
      src: "https://img.cctvch.cn/uploads/ba0059b313931b8cba17021823abc6a1.png",
      title: "案例名称",
      index: 1,
      alt: "case",
    },
    {
      src: "https://img.cctvch.cn/uploads/029519fe38775a765980c57d4364e848.png",
      title: "案例名称",
      index: 2,
      alt: "case",
    },
    {
      src: "https://img.cctvch.cn/uploads/68efc4142f5517d8669f78a32a6428ad.png",
      title: "案例名称",
      index: 3,
      alt: "case",
    },
  ],
  info: [
    {
      title: "媒体传播中心",
      url: "/project?code=classify_1a50d44",
    },
    {
      title: "政府合作中心",
      url: "/project?code=classify_1ee87ed",
    },
    {
      title: "绿色低碳传播中心",
      url: "/project?code=classify_22b0790",
    },
    {
      title: "乡村振兴推广中心",
      url: "/project?code=classify_264a3db",
    },
    {
      title: "国际事务中心",
      url: "/project?code=classify_2973a67",
    },
    {
      title: "品牌文化中心",
      url: "/project?code=classify_2d4c88a",
    },
    {
      title: "健康中国中心",
      url: "/project?code=classify_378a6e6",
    },
    {
      title: "会展会务中心",
      url: "/project?code=classify_3c6d1de",
    },
    {
      title: "数字科技中心",
      url: "/project?code=classify_455caaf",
    },
    {
      title: "区域发展规划中心",
      url: "/project?code=classify_4988ee9",
    }
  ],
  hot: []
});

onMounted(() => {
  let id = route.query.id + '';
  getDtail(id)
  getNewsPropsal().then((res: any) => {
    const propsalData = res;
    detailData.recommend = propsalData;
  });
  getCase()
  getHot()
})

const r = computed(() => {
  return route.query.id
})

watch(r, (val: any) => {
  getDtail(val)

})

const getDtail = (id: string) => {
  getNewsDetail({ id }).then((res: any) => {
    if (res.title) {
      document.title = res.title
    }
    const data = res;
    detailData.article = data;
  });
}

// 获取相关案例的接口
const getCase = () => {
  getCaseList().then((res: any) => {
    console.log(res)
    sideData.case = res;
  });
}
// 获取资讯热榜
const getHot = () => {
  getHotList().then((res: any) => {
    const data = res;
    sideData.hot = data;
  });
}



</script>

<style scoped>
img {
  display: inline;
}
.article-wrap {
  margin: 0 auto 78px;
  padding-top: 90px;
  width: 1440px;
}

/* 文章内容页 */
.article-inner {
  width: 940px;
}

.article-title {
  font-size: 38px;
  color: #000000;
  line-height: 60px;
}

.article-side-info {
  margin-top: 40px;
}

.article-mark {
  margin-right: 13px;
  width: 45px;
  height: 25px;
  line-height: 25px;
  background: #F0F0F0;
  border-radius: 11px;
}

.article {
  margin-top: 60px;
  line-height: 2;
  font-size: 18px;
  color: #000;
}

.article img {
  display: inline-block;
  max-width: 800px;
  border-radius: 12px;
}

/* 文章内容页下面部分 */
.main-bottom {
  margin-top: 70px;
  padding-top: 15px;
  border-top: 2px solid #9195A3;
  ;
}

.main-recommend-title {
  margin-top: 45px;
  margin-bottom: 20px;
  color: #000;
}

.recommend-item {
  margin-right: 22px;
  width: 150px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
}

.recommend-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommend-item:last-child {
  margin-right: 0;
}

/* 右侧边栏 */
.news-aside {
  width: 418px;
}
</style>
